{% extends 'bg-frame.html'%}

{% block head_css %}

        {{ super()}}

        <link rel="stylesheet" type="text/css" href="/static/css/front.css">
        <link rel="stylesheet" type="text/css" href="/static/css/github.css">

        <link rel="stylesheet" type="text/css" href="/static/css/global_style.css">
        <link rel="stylesheet" type="text/css" href="/static/css/thickbox.css">


        <!-- ===================代码块高亮显示====================================  -->
        <link rel="stylesheet" type="text/css" href="/static/css/crayon_style.css">

        <link rel="stylesheet" type="text/css" href="/static/css/common.css">
        <link href="/static/css/info.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="/static/css/style.css">
        <link rel="stylesheet" type="text/css" href="/static/libs/google-code-prettify/prettify.css">
        <link rel="stylesheet" type="text/css" href="/static/libs/google-code-prettify/theme/tomorrow.min.css">


        <!-- <link rel="stylesheet" type="text/css" href="/static/css/jobbole-wp-plugin.css"> -->
        <style type="text/css">
            
        .back_to_top{
            position: fixed;
            bottom:8.7em;
            margin-left: 45.5em !important;
            /*border:1px solid #888;*/
        }
        li.L0, li.L1, li.L2, li.L3,
        li.L5, li.L6, li.L7, li.L8{
         list-style-type: decimal !important;
        }
          .fa-thumbs-o-up:hover,
          .fa-bookmark-o:hover,
          .fa-comments-o:hover{
            color: #fa1;
          }
        #comment-box{
            display: none;
        }
         #comment-box textarea{

            height: 60px;
            width: 300px;
            
            border: 1px solid #4a4a4a !important;
          }
          #comment-box input {
            border: 1px solid #555 !important;
            width: 3em;
            height: auto;
          }
          #tip{
            display: none;
            color: red !important;
          }
</style>
<!-- ===================================headcss ============================-->
{% endblock %}
<!-- ===================================headcss ============================-->


<!--=================================== 文章分类============================== -->
{% block posts_category %}
{{ super()}}
<ul>
  <li><a href="javascript:void(0);">学无止境（33）</a></li>
  <li><a href="javascript:void(0);">日记（19）</a></li>
  <li><a href="javascript:void(0);">慢生活（520）</a></li>
  <li><a href="javascript:void(0);">美文欣赏（40）</a></li>
</ul>
{% endblock %}


<!-- =======================站长推荐==================================-->
{% block posts_recommend %}
{{ super()}}
 <li><a href="">...</a></li>

{% endblock %}

<!--============================== left_box================================ -->
{% block left_box %}
{{ super()}}

{% endblock %}
<!--============================== left_box================================ -->




<!--============================== infosbox================================ -->
{% block infosbox %}

{% if data is not none %}
    <div class="newsview">
      <div class="news_about">

        <div class="bloginfo">
            <h3><span style="color: rgb(0,0,0,1);">{{data.title}}</span></h3>
            <ul>
              <li class="timer">发布时间：<span style="color: orange;">  {{data.publish_time|string()|truncate(13,end="")}}</span></li>
              <li class="view">阅读量：<span style="color: orange;">4567</span></li>
            </ul>
      </div>
        <strong>简介</strong>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。</div>
      
      <div class="news_con">
          {{data.content|safe}}

      </div>
    </div>

    <div id='talk'>
      
        <span data-post-id="" class=" btn-bluet-bigger href-style vote-post-up   register-user-only ">
          <a href="#article-point"><i class="fa  fa-thumbs-o-up"></i> </a>
          <font id="point-num">{{ data.point_up_num }}</font> 赞
        </span>
      
      &emsp;
       
        <span data-book-type="1" data-site-id="13" data-item-id="" data-item-type="1" class=" btn-bluet-bigger href-style bookmark-btn  register-user-only ">
          <a href="#article-bookmark"> <i class="fa fa-bookmark-o "></i></a>
          <font id="mark-num">{{data.bookmark_num}}</font> 收藏
        </span>
       
      &emsp;

       
        <span class="btn-bluet-bigger href-style hide-on-480">
          <a href="#article-comment"><i class="fa fa-comments-o"></i> </a>
          <font id="comment-num">{{comment_num}}</font> 评论
        </span>
    
        
    </div>

    <span id="tip">请先登录,才能评论</span>
    <div id='comment-box'>
        <textarea placeholder="输入你宝贵的评论！" id="comment-text"></textarea>
        <br>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        <input type="button" id="clean" value="清除"> 
        &emsp;&emsp;&emsp;&emsp;
        <input type="button" id="add-up" value="提交">
    </div>
    <div class="nextinfo">
      <p>上一篇：<a href="{{url_for('detail.detail',anchor=before_article.be_id )}}">{{ before_article.be_title|replace("'","", count = 2)}}</a></p>
      <p>下一篇：<a href="{{url_for('detail.detail',anchor=next_article.next_id )}}">{{ next_article.next_title|replace("'","", count = 2)}}</a></p>
    </div>
{% else %}
<H1> 很遗憾，暂时还没有哦！</H1>
    {%endif%}

    <img class="back_to_top" src="/static/img/go2top.jpg" style="width: 2em;height: auto; border-radius: 300px;">

{% endblock %}
<!--============================== infosbox================================ -->



<!--============================== body_js================================ -->

{% block body_js %}
{{ super()}}

<script type="text/javascript" src="/static/libs/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="/static/js/jq-colorbox.js"></script>
<script type="text/javascript" src="/static/js/touchwipe.js"></script>
<!-- debug_tb_intercept_redirects  -->
<script type="text/javascript">
    // 代码高亮渲染
  $(window).load(function(){
    $("pre").addClass("prettyprint");//如果其他地方也要用到pre，我们可以再加一个父标签的选择器来区分
    prettyPrint();//代替body上的onload事件加载该方法
  })

    // 快速回到顶部按钮
    var backButton=$('.back_to_top');
    backButton.on('click', backToTop);
    
    function backToTop() {
        $('html,body').animate({
            scrollTop: 0
        },800);
    }

  // 隐藏源码中的评论，点赞，收藏标签，不需要
  $(".post-adds").find('span').css('display','none');
 
    $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */
        if ($(window).scrollTop() > $(window).height()*4)
            backButton.fadeIn();
        else
            backButton.fadeOut();
    });
    $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/

  // ajax处理点赞，收藏，评论记录
  $(document).ready(function(){

    var method= null;

    var post_id = 0;

    //  点赞数处理
    var $point = $('#talk').find('.fa-thumbs-o-up');
    $point.click(function(){
      var $point_num = $('#point-num');
      var point_old_num = parseInt($.trim($point_num.text()));

      if($.trim($point_num.text()).length == 0){
        point_old_num = 0;
      }
      $point_num.text(point_old_num+1);
       method='point';
       post_id='{{data.id}}';
      ajax_handle(method,post_id,point_old_num)
    });

    // 收藏数处理
    var $mark = $('#talk').find('.fa-bookmark-o');
    $mark.click(function(){
      var $mark_num = $('#mark-num');
      var mark_old_num = parseInt($.trim($mark_num.text()));


      if($.trim($mark_num.text()).length == 0){
        mark_old_num = 0;
      };
      $mark_num.text(mark_old_num+1);
      method='mark';
      post_id='{{data.id}}';
      ajax_handle(method,post_id,mark_old_num);
    });

    // 评论（数）处理
    var $comment = $('#talk').find('.fa-comments-o')
    $comment.click(function(){

        // 判断是否登录,依据从后端传过来
        var is_logined = false 

        if($.trim("{{ses}}")){
            is_logined = true;
        }

        if(is_logined){

            // 显示评论框
            $("#comment-box").css('display',"block")
            var $btn_add_up = $('#add-up')
            var $btn_clean = $('#clean')

            //  清除按钮
            $btn_clean.click(function(){$("#comment-text").val(null)})
                 
                    
            $btn_add_up.click(function(){
                var comment_text = $("#comment-text").val()
                if($.trim(comment_text).length>0){

                var post_id='{{data.id}}';
                ajax_handle_comment(comment_text, post_id);
            
                   
                 var $comment_num = $('#comment-num');
                  var comment_old_num = parseInt($.trim($comment_num.text()));
                  if($.trim($comment_num.text()).length == 0){
                    comment_old_num = 0;
                  };
                  $comment_num.text(comment_old_num+1);
              
                    
                }else{
                    alert('还没有输入评论哦！')
                }
            })

          }else{
            // 显示提示
            var $tip = $("#tip")
            $tip.fadeIn(500)
            $tip.fadeOut(1000)
          }
    });
})



 function ajax_handle(method=null,post_id=null,num=0){
       
     $.ajax({
       url:'{{url_for("ajax_handle.view_ajax_handle")}}',
       type:'post',
       dataType:'json',
       data:{
        'handle':method,
        'post_id':post_id,
        'num':num
      },
       success:function(data){
         console.log('点赞, 收藏成功');
         // return 'ok'
       },
       error:function(er){
            console.log('not ok')
       }
     })
  }

  function ajax_handle_comment(comment_text, post_id){
    
       
        $.ajax({
            type:'post',
            url:'{{url_for("ajax_handle.view_ajax_handle")}}',
            dataType: 'text',
            data:{
                'handle':'comment',
                'comment':comment_text,
                'post_id':post_id

            },
            success: function (dt) {
                // body...
                $("#comment-box").css('display',"none")
                console.log('评论成功');
                // return 'ok'

            },
            error:function(er){
                 console.log('评论失败');
                 // return 'not ok'
            }

          })
    }


</script>

{% endblock %}
<!--============================== body_js================================ -->
